<template>
	<view class="bg-color">
		<scroll-view scroll-y class="container">
			<home @productTab="productTap" v-if="current === 'home'"></home>
			<price v-else-if="current === 'price'"></price>
			<produce :index="productIndex" v-else-if="current === 'produce'"></produce>
			<about v-else></about>
		</scroll-view>
		<view class="tabbar">
			<view @click="changeView" 
				data-selectkey="home" 
				:class="current === 'home'? 'text-white' : 'text-gray'"
				class="tab-item">
				<text :class="current === 'home'? 'cuIcon-homefill' : 'cuIcon-home '" class="index-icon"></text>
				<text class="text-center">首页</text>
			</view>
			<view @click="changeView" 
				data-selectkey="price" 
				:class="current === 'price'? 'text-white' : 'text-gray'"
				class="tab-item">
				<text class="index-icon"
					:class="current === 'price'? 'cuIcon-rechargefill' : 'cuIcon-recharge'"
					></text>
				<text class="text-center">产品报价</text>
			</view>
			<view @click="changeView" 
				data-selectkey="produce" 
				:class="current === 'produce'? 'text-white' : 'text-gray'"
				class="tab-item">
				<text class="index-icon"
					:class="current === 'produce'? 'cuIcon-circlefill' : 'cuIcon-circle'"
					></text>
				<text class="text-center ">产品介绍</text>
			</view>
			<view @click="changeView" 
				data-selectkey="about" 
				:class="current === 'about'? 'text-white' : 'text-gray'"
				class="tab-item">
				<text class="index-icon"
					:class="current === 'about'? 'cuIcon-peoplefill' : 'cuIcon-people'"
					></text>
				<text class="text-center">关于我们</text>
			</view>
		</view>
	</view>
</template>

<script>

	export default {
		data() {
			return {
				current: "home",
				productIndex: 0,
			}
		},
		onLoad: function() {
			this.autorLogin();
		},
		onShareAppMessage:function(res){
			return {
				title: '阿睿斯汽车膜',
				path: '/pages/index'
			};
		},
		methods: {
			productTap: function(index) {
				this.productIndex = index;
				this.current = "produce";
			},
			changeView: function(event) {
				this.current = event.currentTarget.dataset.selectkey;
			},
			autorLogin: function() {
				let self = this;
				uni.login({
					success: function(res) {
						self.http.login(res.code).then(function() {
						});
					}
				});
			},
			
		}
	}
</script>

<style scoped>
	.container {
		height: calc(100vh - 120rpx);
	}
	.tabbar {
		width: 100%;
		height: 120rpx;
		display: flex;
		justify-content: space-around;
	}
	
	.tabbar .tab-item {
		display: flex;
		justify-content: center;
		flex-direction: column;
		
	}
	
	.index-icon {
		text-align: center;
		font-size: 60rpx;
		height: 60rpx;
		line-height: 60rpx;
	}
</style>
